<template>
    <a-card title="最新资讯" :bordered="false" class="card-module">
        <a-list item-layout="horizontal" :grid="{ gutter: 24, xl : 3, xxl: 3 }">
            <a-list-item v-for="item in dataList" :key="item.title">
                <a-card :bordered="false" style="padding: 5px;">
                    <img class="news-img" slot="cover" alt="" :src="item.img" />
                    <a-card-meta>
                        <a slot="title" href="#">{{ item.title }}</a>
                        <template slot="description">{{ item.description }}</template>
                    </a-card-meta>
                </a-card>
            </a-list-item>
        </a-list>
    </a-card>
</template>

<script>
    export default {
        data(){
            return {
                dataList : [
                    { title : 'MicroServices',description : 'Quickly deliver production‑grade features with independently evolvable microservices.',img : 'https://cjlgb-design-developer.cdn.bcebos.com/icon/microservices-1c4af1e9f49b23818bd4afb5f39d6446.png' },
                    { title : 'Cloud',description : 'Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform.',img : 'https://cjlgb-design-developer.cdn.bcebos.com/icon/cloud-26ea959010aa023afd3602e74372d20d.png' },
                    { title : 'Event Driven',description : 'Integrate with your enterprise. React to business events. Act on your streaming data in realtime.',img : 'https://cjlgb-design-developer.cdn.bcebos.com/icon/streams-8cc70cba386bdcf706ddfc9d0a9870ed.png' }
                ]
            };
        }
    }
</script>
<style scoped>
    .news-img{
        height: 100px;
        display: block;
    }
</style>
